Para añadir iBox podemos descargar los archivos necesarios desde la página o bien descargando este ZIP donde amablemente J.Miur ha adaptado y modificado los archivos para Blogger y pone a disposición de todos.
J.Miur nos proporciona en el ZIP dos archivos CSS que son dos modelos diferentes de visionar la ventana modal, cualquiera de ellos es válido y podemos probar para ver cual se ajusta a nuestro gusto antes de decidirnos.
Para utilizar los archivos del ZIP extraemos darkbox.css, lightbox.css y ibox.js .Una vez tenemos los archivos los alojamos en nuestro servidor y los añadimos a nuestra plantilla justo antes de </head> de la siguiente forma:
<script type="text/javascript" src="URL_ibox.js"></script>
<link rel="stylesheet" href="URL_lightbox.css" type="text/css" media="screen"/>
Añadidos los scripts a la plantilla podemos ver en funcionamiento la ventana modal cuando agregamos el atributo rel="ibox" a cualquier enlace.
Imagen-icono:
<a href="URL_imagen" rel="ibox" title="Texto optativo">texto o imagen de enlace </a>
Un documento:
<a href="URL_pagina" rel="ibox" title="Texto optativo">texto o imagen de enlace</a>
Un vídeo:
<a href="http://www.youtube.com/watch?v=(aquí más código)" rel="ibox">texto o imagen de enlace</a>


esto se ve padre gem@, muy a aplicarlo para ver que tal, un saludo!!
Un saludo sharys me alegra que te agrade
hola
muy interesante este script..pero no se podria añadir el script directamente como codigo a la plantilla?? sin tener que copiar los CSS? por si no se tiene acceso ftp al servidor
saludos
Supongo que si, aunque no he probado Alexmosutheskypirate pero el script es tan extenso que ocuparía como dos veces una plantilla. Puedes verlo si lo descargas a tu PC y lo buscas en el blog de notas, creo te olvidarás de añadirlo directamente a la plantilla
Hola Gema, te formulo una pregunta de novata total: No se como subir p. ej, la URL de una imágen a un servidor, el caso es que creo que lo he hecho pero no se como. Como verás estoy muy despistada, tengo ganas que lleguen las vacaciones y ponerme a estudiar, te juro que me voy a poner las pilas. Gracias por tu paciencia.
Aseret disculpa qu en viera este comentario antes, verás... la url de una imagen no la subimos sino que la conseguimos subiendo una imagen a un servidor.
Cuando accedemos a un servidor, ya sea Google Page o el mismo Blogger la imagen desde ese mismo momento ya tiene url, ya se encuentra alojada en un servidor con una url única, ya que en Internet no puede haber dos direcciones iguales, puede que se llame de nombre igual, o incluso que el alojamiento sea el mismo pero variará en algún otro detalle.
Para saber la url de una imagen hay un método de los más sencillo, pones el ratón sobre la imagen, pulsas botón derecho y nos muestra propiedades. Esas propiedades nos muestra también las propiedades de imagen y la dirección (url).
Gracias, lo he aplicado a un blog que aún estoy creando, con gusto te lo mostraré cuando termine
!
una pregunta se puede cambian los valores del ibox para q abra videos
de megavideo.com ? es que no me gusta
mucho youtube XD saludos eso me gustaria saber esta bueno el script
saludos es de mucha ayuda tu blog
Lamento contestar tan tarde Mauricio, había visto tu comentario y por supuesto estaré encantada de ver como ha quedado
DeSfAuSeR he probado antes de contestarte y si, puedes añadir vídeos de megavideo.com el problema que he visto es que al copiar la url del vídeo (no la de la página) sino la url que nos llevará a visualizar el vídeo, nos muestra el vídeo en tamaño es muy grande.
Lo podrías solucionar modificando el archivo CSS, la parte de el tamaño de la ventana modal.
hey! gema!!! recuerdas que te había hablado sobre la iBox en mi blog...pues ya he terminado el diseño
y me ha gustado mucho...puedes checar el efecto en la parte de abajo en la sección de videos, ojalá te guste, ah y no se que tipo de música te guste pero si te agrada la del blog, me gustaría que te suscribieras
je bueno ps esperare tu respuesta y tu comentario global sobre todo el diseño de mi blog.
Enlace: DEPTRA
No funciona en IE
en IE lo que hace es descargar la imagen
Hola! Utilizo el Ibox en blogger y las imágenes sólo se cargan para imágenes alojadas en googlepages o en photobucket, no en blogspot. ¿Me podrías ayudar?
¿Cómo haces para que se carguen las imágenes alojadas en el blog, es decir, en blogspot, con el Ibox? ¡Yo no puedo hacerlo! Por favor, ayúdame! Gracias
Juan José de los dos tamaños que proporciona Blogger utiliza el pequeño, si no te funciona no puedo saber donde está el error sin verlo
En internet explorer 7 y superiores no funciona. Me pueden ayudar???
Gracias y saludos
Yo tengo el 7 y no veo ningún problema Josema
Uy, esta hace competencia con la mia...
Saludos!
Les recomiendo este sitio, explica en 3 pasos como hacer una ventana modal.
http://www.elwebmaster.com/articulos/ventana-modal-con-jquery-en-3-pasos/comment-page-1#comment-14745
Sólo que se trata de una ventana modal con jQuery
Claro, no está el ejemplo, pero está todo el codigo, crea un archivo html, pega el codigo y adjuntale la librería jquery para que lo veas funcionando, es un muy buen ejemplo, yo lo uso para el fondo que la hace modal, la verdad tengo mi propia librería... bueno me basé en otra de alertas pero me hace lo que necesito y sin mucho codigo. Exitos
Vean este sitio, es gratuito y para que todos lo usen, aún está en desarrollo pero ya es usable, está hecho 100% con la librería JQuery y GoogleMaps. si tienen comentarios mi correo es ingjuanfelipe @ gmail . com

El sitio es http://www.tiendamaps.com
Exitos para todos.
Gem@ aquí te dejo el link para que puedas ver el funcionamiento de dicho codigo http://www.queness.com/resources/html/modal/jquery-modal-window.html
Yo uso como ventana modal Lytebox es un script muy liviano porque no requiere de otros scripts para su funcionamiento.
http://gemablog-.blogspot.com/2007/12/lytebox-visor-de-imgenes-slideshow.html
De todas formas te agradezco el detalle de buscar el ejemplo
Gemma, no quiero molestar, pero no me resulta.Lo he hecho como tu Y Jmiur lo dijeron y no aparece la ventana.

Alojé los archivos primero en skydrive...no resulto
Luego en xooimage...tampoco....
No se que hacer, porque los videos de youtube estan muy grandes y ya no entran en mi main y esta ventana me parece muy buena tanto para videos como para imagenes...incluso texto..
Besos
LIZ
Te dejo dondo hice la prueba

AQUI PRUEBA
Tambien le dejé un mensaje en Vagabundia...
Besitos
LIZ
Gemma ahora subi los archivos a google site y tampoco funciona....no se abre ni youtube!!!




Que hago mal?
Sniff
siempre me resultan los trucos...
me syudas
gracias
besis
LIZ
No te preocupes por mi querida Gemma...Jmiur me estña ayudando

Pero tengo mas preguntas...tu sabes que nunc acaban jajajaj!!!
Besotes y descansa donde este
LIZ
Sigue sus consejos J.Miur es mucho J.Miur
Gema te queria preguntar si es posible poner un texto en una ventana modal (como el de contenido oculto) pero que tu lo escribas en el codigo.
Hola! estoy interesado en aplicar esto en mi blog...

La verdad que no entiendo mucho
Más que nada esta parte:
"Para utilizar los archivos del ZIP extraemos darkbox.css, lightbox.css y ibox.js .Una vez tenemos los archivos los alojamos en nuestro servidor y los añadimos a nuestra plantilla"
Espero que puedas ayudarme, saludos!
www.eljuegoquebuscabas.com.ar
http://sites.google.com/
Cuando ya los tienes subidos al servidor copias la url del archivo ibox.js y la pegas donde dice
<script type="text/javascript" src="aquí-pegas-la- url-de-tu archivo-ibox.js"></script>
Luego haces lo mismo con el archivo css
<link rel="stylesheet" href="aquí-pegas-la- url-de-tu archivo-lightbox.css" type="text/css" media="screen"/>
y esos dos códigos los pegas en plantilla justo antes de </head>
Saludos Gem@, espero te encuentres bien, he implementado esto de iBox en mi blog y me ha quedado muy bien, pero me gustaría hacerte una consulta al respecto, cuando le aplico el efecto a una imagen me gustaría que al hacer clic sobre ella esta se viera en tamaño real, por ejemplo le he aplicado el efecto a una imagen cuyo tamaño original es de 709x1050 pixeles pero al hacer clic sobre ella se abre con estas dimensiones: 349x527. Será posible lograr que al hacer clic sobre la imagen esta se muestre en sus dimensiones reales… Agradezco tu respuesta.
hola, te quería preguntar si se puede utilizar para abrir una pagina web, o si saves de alguna manera de abrir una web con una ventana modal
Nota: solo los miembros de este blog pueden publicar comentarios.